<template>
  <div class="summary" :style="{height: pageSize + 'px'}">
    <swipe :auto="0" class="slide-con" :showIndicators="false" :continuous="false">
      <swipe-item class="slide-item">
        <div class="conclusion" transition="expand">
          <div class="progress">
            <div class="bar">
            </div>
          </div>
          <div class="cl-module">
            <div class="cl-m-header">
              总结
            </div>
            <div class="cl-m-body">
              <x-textarea placeholder="课程总结" v-model="course.summary" class="textarea xj-textarea" :height="400"></x-textarea>
            </div>
          </div>
        </div>
      </swipe-item>
      <swipe-item class="slide-item">
        <div class="survey" transition="expand">
          <div class="progress">
            <div class="bar">
            </div>
          </div>
          <div class="cl-module">
            <div class="cl-m-header">
              观察
            </div>
            <div class="cl-m-body">
              <x-textarea placeholder="请输入本次课程的观察" v-model="course.observe" class="textarea xj-textarea" :height="400"></x-textarea>
            </div>
          </div>
        </div>
      </swipe-item>
      <swipe-item class="slide-item">
        <div class="print" transition="expand">
          <div class="progress">
            <div class="bar">
            </div>
          </div>
          <div class="cl-module">
            <div class="cl-m-header">
              现场照片
            </div>
            <div class="cl-m-body">
              <div class="photo-list">
                <div class="photo-item" v-for="photo in course.photos">
                  <img :src="photo.url">
                  <span class="iconfont icon-close delete-btn" @click="deletePhoto(photo)"></span>
                </div>
                <div class="photo-item">
                  <span slot="icon" class="iconfont icon-plus upload-img-btn" @click="uploadImg"></span>
                </div>
              </div>

              <div class="clear"></div>
            </div>
          </div>
        </div>
      </swipe-item>
      <button type="button" class="page-submit-btn" @click="submit">生成总结</button>
    </swipe>
  </div>
</template>

<script>
import {
  Tabbar,
  Cell,
  Group,
  Badge,
  XTextarea,
  XButton
} from 'vux'

import { Swipe, SwipeItem } from 'vue-swipe'

export default {
  components: {
    Tabbar,
    Cell,
    Group,
    Badge,
    XTextarea,
    XButton,
    Swipe,
    SwipeItem
  },
  data () {
    return {
      id: 0,
      course: {},
      pageSize: 500,
      photos: []
    }
  },
  created () {
    var id = parseInt(this.$route.params.id)
    if (isNaN(id) || id < 0) {
      id = 0
    }
    this.id = id
    this.$api.course.find(id)
        .then((course) => {
          course = this.$course.formatCourse(course)
          this.course = course
        })
    this.setPageSize()
  },
  methods: {
    uploadImg () {
      this.$wechat.chooseImage({
        count: 9, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          var localIds = res.localIds
          localIds.forEach((localId) => {
            window.xLog('localId:' + localId)
            var photo = {}
            photo.url = localId
            this.course.photos.push(photo)
            this.$wechat.uploadImage({
              localId: localId,
              success: (res) => {
                var serverId = res.serverId
                window.xLog('serverId:' + serverId)
                this.$api.photo.downloadMedia(serverId).then((data) => {
                  var url = this.$helper.getImageUrl(data.url)
                  photo.url = url
                  this.photos.push(url)
                })
              }
            })
          })
        }
      })
    },
    deletePhoto (photo) {
      this.showConfirm('照片删除后将不能恢复，是否删除', () => {
        this.course.photos.forEach((_p, index) => {
          if (_p === photo) {
            this.course.photos.splice(index, 1)
          }
        })
        if (photo.id) {
          this.$api.course.deletePhoto(photo.id)
        }
      })
    },
    swipeItemCreated () {
    },
    swipeItemDestroyed () {
      // console.log(e)
    },
    setPageSize () {
      this.pageSize = window.innerHeight
    },
    submit () {
      var data = {
        summary: this.course.summary,
        observe: this.course.observe,
        photos: this.photos
      }
      this.$api.course.editSummary(this.id, data).then(() => {
        this.showSuccess('提交成功')
      }).catch((e) => {
        this.showError(e.message)
      })
    },
    showSuccess (msg) {
      this.$vux.toast.show({
        text: msg,
        type: 'success'
      })
    },
    showError (msg) {
      this.$vux.toast.show({
        text: msg,
        type: 'warn'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.expand-transition{
  transition: all .3s ease;
  overflow: hidden;
}
.expand-enter,.expand-leave{
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
.progress{
  background-color: #ffffff;
  height: 6px;
  margin:15px;
  border-radius: 3px;
}
.bar{
  height: 6px;
  border-radius: 3px;
  background: #60c9cf;
}
.textarea{
  height: auto;
}
.conclusion{
  .bar{
    width: 33%;
  }
}
.survey{
  .bar{
    width: 66%;
  }
}
.photo-item .upload-img-btn{
  font-size:40px;
}
.print{
  .bar{
    width:100%;
  }
  img{
    width:93px;
    height:93px;
  }
}
.photo-item{
  float:left;
  width: 80px;
  height: 80px;
  margin-right:10px;
  border: solid 1px #efeff4;
  margin-top: 15px;
  margin-bottom: 40px;
  text-align: center;
  img{
    width: 80px;
    height: 80px;
  }
  span{
    color: #efeff4;
    line-height: 80px;
    font-size:17px;
  }
}
.photo-item{
  position: relative;
}
.photo-item .delete-btn{
  position: absolute;
  width:30px;
  height:30px;
  bottom:0;
  right:0;
  background-color: rgba(50, 59, 70, 0.5);
  border-radius: 15px;
  line-height: 30px;
}
</style>
